<template>
    <div>
        <div class="header">
            那些期盼与亲友团聚的人,仍期待着大家的帮助
        </div>
        <div class="content">
            <div class="tell">
                <div class="gg">
                    本站公告
                </div>
                <div>
                    <van-notice-bar
                    color="#333"
                    background="#fff"
                    left-icon="info-o"
                    >
                    警告：网络诈骗猖獗，请切记不要相信来自手机短信/QQ微信等关于找到失踪者要求打款的信息，如遭到骚扰请联系我们或直接拨打110
                    </van-notice-bar>
                </div>
            </div>
            <h3 class="title">公益网寻人启事发布协议</h3>
            <div class="xy">
                <div class="head">
                    <p>受托方：中国寻人网--------（以下简称甲方）</p>
                    <p>委托方：求助者家属--------（以下简称乙方）</p>
                    <p>依据中华人民共和国《合同法》的有关规定，乙方聘请甲方为其提供寻人服务，协助与处理乙方的相关委托事务，经双方协商一致达成本协议。</p>
                </div>
                
                <div class="tiaojian">
                    <h4>一、协议条件：</h4>
                    <p>1．乙方委托甲方为其寻人或寻家服务，应有合法的身份和理由,不得从事违法活动。</p>
                    <p>2．乙方在取得甲方为其提供的相关资料后不得将其用于非正当目的，更不得损害第三者的利益。</p>
                    <p>3．乙方在登资料后请主动与甲方联系资料审核，以便及时准确发布寻人信息。</p>
                </div>

                <div class="zereng">
                    <h4>二、双方责任：</h4>
                    <p>(1)甲方责任</p>
                    <p>1.运用专业的技巧和职能协助乙方寻人或寻家，不得违反国家相关的法律规定从事违法活动。</p>
                    <p>2.甲方进行的工作应该按乙方提供的线索及时进行寻找。</p>
                    <p>3.若寻人启事没有发布或者发布前需要要求退款，甲方保证退回所有相关款项。</p>
                    <p>(2)乙方责任</p>
                    <p>1．保证向甲方提供的信息是真实、准确、完整的，并且没有虚假的内容。</p>
                    <p>2．酬金填写时请您慎重考虑，求助者有履行承诺的义务，根据知情者提供信息或线索，找到被寻找者后，提供信息者有获取求助者所承诺酬金的权益。</p>
                </div>

                <div class="photo">
                    <h4>三、提供照片：</h4>
                    <p>1. 乙方有扫描仪可以扫描照片，扫描后请直接在线登记资料并上传，或发送至甲方的指定信箱</p>
                    <p>2. 乙方手里有照片但不能扫描，可以邮寄给甲方，由甲方扫描制作。(如果需要退回照片,请附贴有邮票的信封，甲方会在扫描后将照片寄回)</p>
                </div>

                <div class="bukekangli">
                    <h4>四、不可抗力：</h4>
                    <p>乙方同意：鉴于互联网的特殊性如黑客攻击、网络中断等，凡出现非甲方过错之情形的，应当视为不可抗力。</p>
                </div>
            </div>

            <div class="btn" @click="tofind">
                我同意，发布寻人启事
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { NoticeBar } from 'vant';

Vue.use(NoticeBar);
export default {
    methods:{
        tofind(){
            this.$router.push('/startfind')
        }
    }
}
</script>
<style lang="scss" scoped>
    .header{
        width: 100%;
        height: 80px;
        line-height: 80px;
        box-sizing: border-box;
        padding-left: 250px;
        font-size: 30px;
        color: #000;
        background: #eee;
    }
    .content{
        width: 1000px;
        border-bottom: 3px solid #ccc;
        margin: auto;
        padding-bottom: 40px;
        margin-bottom: 20px;
        .tell{
            width: 980px;
            height: 40px;
            border-bottom: 1px solid #ddd;
            .gg{
                float: left;
                color: #0163ba;
                line-height: 40px;
                padding:0 20px;
            }
        }
        .title{
            text-align: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
            margin-top: 20px;
        }
        .xy{
            font-size: 14px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
            p{
                padding: 2px 0;
            }
            .head{
                margin-top: 25px;
            }
            .tiaojian{
                margin-top: 25px;
            }
            .zereng{
                margin-top: 25px;
            }
            .photo{
                margin-top: 25px;
            }
            .bukekangli{
                margin-top: 25px;
            }
        }

        .btn{
            color: #fff;
            width: 200px;
            border: 1px solid #ccc;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            margin:auto;
            margin-top: 30px;
            cursor: pointer;
            background: green;
            opacity: .6;
        }
        .btn:hover{
            opacity: 1;
        }
    }
</style>